<template>
  <el-card>
    <div slot="header" class="card-header">
      <span>{{ this.$route.meta.title }}</span>
      <div>
        <el-button type="primary" size="mini" @click="dialogA = true">
          新增
        </el-button>
        <el-button type="primary" size="mini" @click="dialogB = true">
          删除
        </el-button>
        <el-button type="primary" size="mini" @click="dialogD = true">
          预览
        </el-button>
        <el-button type="primary" size="mini"> 导入 </el-button>
        <el-button type="primary" size="mini"> 导出 </el-button>
      </div>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="columnA" label="名称"> </el-table-column>
        <el-table-column prop="columnB" label="地区"> </el-table-column>
        <el-table-column prop="columnC" label="审计月份"> </el-table-column>
        <el-table-column prop="columnD" label="是否通过"> </el-table-column>
        <el-table-column prop="columnE" label="是否风险"> </el-table-column>
        <el-table-column prop="columnE" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="
                dialogC = true
                editData = scope.row
              "
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="margin-bottom: 40px">
        <Pagination :total="tableData.length" />
      </div>
    </div>
    <el-card class="echart" shadow="never">
      <EchartBar></EchartBar>
    </el-card>

    <el-dialog title="问责管理添加" :visible.sync="dialogA" width="60%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.columnA" style="width: 40%"></el-input>
        </el-form-item>
        <el-form-item label="月份">
          <el-input v-model="form.columnB" style="width: 40%"></el-input>
        </el-form-item>
        <el-form-item label="地区">
          <el-input v-model="form.columnC" style="width: 40%"></el-input>
        </el-form-item>
        <el-form-item label="是否通过">
          <el-input v-model="form.columnD" style="width: 40%"></el-input>
        </el-form-item>
        <el-form-item label="是否风险">
          <el-input v-model="form.columnE" style="width: 40%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogA = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            handleAdd()
            dialogA = false
            $message({
              message: '添加成功',
              type: 'success'
            })
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="问责管理删除" :visible.sync="dialogB" width="60%">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="columnA" label="名称"> </el-table-column>
        <el-table-column prop="columnB" label="地区"> </el-table-column>
        <el-table-column prop="columnC" label="审计月份"> </el-table-column>
        <el-table-column prop="columnD" label="是否通过"> </el-table-column>
        <el-table-column prop="columnE" label="是否风险"> </el-table-column>
      </el-table>
      <div class="pagination" style="margin-bottom: 40px">
        <Pagination :total="tableData.length" />
      </div>
      <span slot="footer">
        <el-button @click="dialogB = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            handleDel()
            dialogB = false
            $message({
              message: '删除成功',
              type: 'success'
            })
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="问责管理编辑" :visible.sync="dialogC" width="60%">
      <el-form label-width="130px" :model="editData">
        <el-form-item label="名称">
          <el-input v-model="editData.columnA"></el-input>
        </el-form-item>
        <el-form-item label="审计地区">
          <el-input v-model="editData.columnB"></el-input>
        </el-form-item>
        <el-form-item label="审计月份">
          <el-input v-model="editData.columnC"></el-input>
        </el-form-item>
        <el-form-item label="是否通过">
          <el-input v-model="editData.columnD"></el-input>
        </el-form-item>
        <el-form-item label="是否风险">
          <el-input v-model="editData.columnE"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="dialogCC = false">取 消</el-button>
        <el-button type="primary" @click="dialogCC = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="问责管理预览" :visible.sync="dialogD" width="60%">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="columnA" label="名称"> </el-table-column>
        <el-table-column prop="columnB" label="地区"> </el-table-column>
        <el-table-column prop="columnC" label="审计月份"> </el-table-column>
        <el-table-column prop="columnD" label="是否通过"> </el-table-column>
        <el-table-column prop="columnE" label="是否风险"> </el-table-column>
      </el-table>
      <div class="pagination" style="margin-bottom: 40px">
        <Pagination :total="tableData.length" />
      </div>
      <span slot="footer">
        <el-button @click="dialogD = false">取 消</el-button>
        <el-button type="primary" @click="dialogD = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import EchartBar from './components/EchartBar'
import Pagination from '@/components/Pagination'
export default {
  components: {
    EchartBar,
    Pagination
  },

  data() {
    return {
      dialogA: false,
      dialogB: false,
      dialogC: false,
      dialogCC: false,
      dialogD: false,
      editData: {},
      rows: [],
      form: {
        columnA: '河北夏日新套餐',
        columnB: '河北',
        columnC: '2020.2',
        columnD: '是',
        columnE: '是'
      },
      tableData: [
        {
          columnA: '市区热区',
          columnB: '北京',
          columnC: '2020.1',
          columnD: '是',
          columnE: '否'
        },
        {
          columnA: '省内新用户',
          columnB: '北京',
          columnC: '2020.1',
          columnD: '是',
          columnE: '否'
        },
        {
          columnA: '彩信储存容量',
          columnB: '北京',
          columnC: '2020.1',
          columnD: '否',
          columnE: '否'
        },
        {
          columnA: '用户需求',
          columnB: '北京',
          columnC: '2020.1',
          columnD: '否',
          columnE: '否'
        },
        {
          columnA: '蓝色夏季',
          columnB: '北京',
          columnC: '2020.1',
          columnD: '否',
          columnE: '是'
        }
      ]
    }
  },

  methods: {
    handleAdd() {
      this.tableData.unshift(this.form)
    },
    handleSelectionChange(rows) {
      rows.forEach(item => {
        let index = this.tableData.indexOf(item)
        if (this.rows.indexOf(index) === -1) this.rows.push(index)
      })
    },
    handleDel() {
      this.rows.forEach(item => {
        this.tableData.splice(item, 1)
      })
      this.rows = []
      this.$refs.multipleTable.clearSelection()
    }
  }
}
</script>

<style lang="scss" scoped>
.mgb {
  margin-bottom: 20px;
}
.echart {
  margin-top: 100px;
  /deep/ .el-card__body {
    height: 550px !important;
  }
}
</style>
